<template>
  <div id="category">
    <van-search
      input-align="center"
      v-model="searchData"
      placeholder="商品搜索 共329万款好物"
    />
    <van-tree-select
      :items="items"
      :main-active-index.sync="activeIndex"
      height="calc(100vh - 104px)"
      @click-nav="changeRight"
    >
      <template #content>
        <div class="imgbanner">
          <img width="100%" :src="bannerImg" alt="" />
        </div>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(item, index) in subCategoryList"
            :key="index"
            :icon="item.wap_banner_url"
            :text="item.name"
            :to="'/categoryList/' + item.id"
          />
        </van-grid>
      </template>
    </van-tree-select>

    <tab-btn></tab-btn>
  </div>
</template>

<script>
import tabBtn from "@/components/tabBtn.vue";
import axios from "axios";
import api from "@/assets/config/api.js";

export default {
  data() {
    return {
      searchData: "",
      //   items: [{ text: "分组 1" }, { text: "分组 2" }],
      activeIndex: 0,
      data: {},
      subCategoryList: [],
      bannerImg: "",
    };
  },
  async created() {
    let res = await axios.get(api.CatalogList);
    let data = res.data;
    this.data = data.data;
    console.log(data);
    this.subCategoryList = this.data.currentCategory.subCategoryList;
    this.bannerImg = this.data.currentCategory.img_url;
  },
  computed: {
    items: function () {
      // [{ text: "分组 1" }, { text: "分组 2" }]
      if (this.data.categoryList == undefined) {
        return [];
      } else {
        let arr = [];
        this.data.categoryList.forEach((item, index) => {
          item.text = item.name; //给这个item对象添加一个字段 text
          arr.push(item);
        });
        return arr;
      }
    },
  },
  methods: {
    changeRight: function (index) {
      //   console.log(index);
      this.activeIndex = index;
    },
  },
  watch: {
    //监听 activeIndex
    activeIndex: async function () {
      if (this.items.length != 0) {
        // console.log(this.items);
        let id = this.items[this.activeIndex].id;
        // console.log(id);
        let res = await axios.get(api.CatalogCurrent, { params: { id } });
        // console.log(res);
        this.subCategoryList = res.data.data.currentCategory.subCategoryList;
        this.bannerImg = this.items[this.activeIndex].img_url;
      } else {
        this.subCategoryList = [];
      }
    },
  },
  components: {
    tabBtn,
  },
};
</script>
<style lang="less">
#category {
  .imgbanner {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 10px 10px;
  }
}
</style>